<template>
	<view class="prefer-content">
		<!-- 标题 -->
		<view class="prefer-title">
			为你优选
		</view>
		<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
			<view class="prefer-dis">
				<block v-for="(item,index) in preferdata" :key="index">
					<view class="prefer-view">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{item.title}}</text>
						<text>{{item.lable}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				preferdata: [
					{
						'image':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602569726438&di=3dfea911593af015c08796ca01b2b7d5&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fwmproduct%2Fa9f05c1182c93e8de12601762bf67f03764666.jpg%2540700w_700h_0e_1l%257Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602569726438&di=3dfea911593af015c08796ca01b2b7d5&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fwmproduct%2Fa9f05c1182c93e8de12601762bf67f03764666.jpg%2540700w_700h_0e_1l%257Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602569726438&di=3dfea911593af015c08796ca01b2b7d5&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fwmproduct%2Fa9f05c1182c93e8de12601762bf67f03764666.jpg%2540700w_700h_0e_1l%257Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602569726438&di=3dfea911593af015c08796ca01b2b7d5&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fwmproduct%2Fa9f05c1182c93e8de12601762bf67f03764666.jpg%2540700w_700h_0e_1l%257Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602569726438&di=3dfea911593af015c08796ca01b2b7d5&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fwmproduct%2Fa9f05c1182c93e8de12601762bf67f03764666.jpg%2540700w_700h_0e_1l%257Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602569726438&di=3dfea911593af015c08796ca01b2b7d5&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fwmproduct%2Fa9f05c1182c93e8de12601762bf67f03764666.jpg%2540700w_700h_0e_1l%257Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20',
						'title':'特别推荐',
						'lable':'晚餐必备'
					}
				]
			}
		}
	}
</script>

<style scoped>
	.prefer-content {
		margin: 30upx 0;
	}
	.prefer-title {
		font-size: 35upx;
		height: 50upx;
		line-height: 50upx;
		margin-bottom: 20upx;
	}
	.scroll {
		white-space: nowrap;
		width: 100%;
		height: 300upx;
	}
	.prefer-dis {
		display: flex;
		justify-content: space-between;
	}
	.prefer-view {
		height: 300upx;
		width: 300upx;
		padding: 0 8upx;
	}
	.prefer-view image {
		width: 300upx;
		height: 200upx;
		border-radius: 8upx;
	}
	.prefer-view text {
		height: 45upx;
		line-height: 45upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-clamp: 1;
		overflow: hidden;
	}
	.prefer-view text:nth-child(2) {
		font-size: 30upx;
	}
	.prefer-view text:nth-child(3) {
		font-size: 27upx;
		color: #9c9c9c;
	}
	.prefer-dis view:nth-child(2) {
		padding: 0 7upx !important;
	}
</style>
